$urlPrefix: '' !default;

// Colors
$black: #212121 !default;
$trueBlack: #000000 !default;
$white: #ffffff !default;
$purple: #665691 !default;
$pink: #e83e8c !default;
$red: #d53e39 !default;
$orange: #f0ad4e !default;
$yellow: #ffc107 !default;
$green: #1b7921 !default;
$mainGreen: #1dab33 !default;
$blue: #2177d4 !default;
$mainBlue: #0c54a0 !default;
$indigo: #30349f !default;
$turquoise: #a4edd9 !default;
$cyan: #5bc0de !default;
$lemon: #fcea9f !default;
$greenLight: #5bb75d !default;
$redLight: #fff6f6 !default;
$redDark: #463c45 !default;
$blueLight: #f4f9fe !default;
$blueDark: #344456 !default;
$purpleLight: #a290d3 !default;
$lightSapphire: rgba(173, 191, 220, 0.36) !default;

$gray-50: #f9fafb !default;
$gray-100: #f3f6f9 !default;
$gray-200: #eaeef5 !default;
$gray-250: #e2e7f0 !default;
$gray-300: #dae0eb !default;
$gray-400: #c5cede !default;
$gray-500: #a8b2c4 !default;
$gray-600: #8a94a6 !default;
$gray-700: #697384 !default;
$gray-750: #5b6270 !default;
$gray-800: #474d58 !default;
$gray-850: #363c46 !default;
$gray-900: #242e33 !default;
$gray-950: #181e21 !default;

$blue-100: #bedffd !default;
$blue-700: #1375d8 !default;

$backgroundDark: $gray-950 !default;
$backgroundLight: $gray-50 !default;
$colorText: $gray-900 !default;
$colorTextSecondary: $gray-700 !default;
$colorLink: $blue !default;
$colorIcon: $gray-600 !default;

$primary: $mainGreen !default;
$secondary: $gray-700 !default;
$danger: $red !default;
$warning: $yellow !default;
$success: $green !default;

$theme-colors: (
  primary: $primary,
  danger: $danger,
  warning: $warning,
  success: $success,
  black: $black,
  orange: $orange,
  purple: $purple,
  indigo: $indigo,
  green: $success,
  red: $danger,
  yellow: $warning,
  secondary: $secondary,
  white: $white,
) !default;

$gray-colors: (
  gray-50: $gray-50,
  gray-100: $gray-100,
  gray-200: $gray-200,
  gray-250: $gray-250,
  gray-300: $gray-300,
  gray-400: $gray-400,
  gray-500: $gray-500,
  gray-600: $gray-600,
  gray-700: $gray-700,
  gray-750: $gray-750,
  gray-800: $gray-800,
  gray-850: $gray-850,
  gray-900: $gray-900,
  gray-950: $gray-950,
) !default;

//spacing
$space: 1rem;
$grid-margin: 15px;

$spaces: (
  0: 0,
  x1: 0.25 * $space,
  x2: 0.5 * $space,
  x3: 0.75 * $space,
  x4: 1 * $space,
  x5: 1.25 * $space,
  x6: 1.5 * $space,
  x7: 1.75 * $space,
  x8: 2 * $space,
  x9: 2.25 * $space,
  x10: 2.5 * $space,
);

$space-x1: map_get($spaces, x1); //4
$space-x2: map_get($spaces, x2); //8
$space-x3: map_get($spaces, x3); //12
$space-x4: map_get($spaces, x4); //16
$space-x5: map_get($spaces, x5); //20
$space-x6: map_get($spaces, x6); //24
$space-x7: map_get($spaces, x7); //28
$space-x8: map_get($spaces, x8); //32
$space-x9: map_get($spaces, x9); //36
$space-x10: map_get($spaces, x10); //40

$form-group-margin-bottom: $space-x6;

$headings-margin-bottom: $space;
$paragraph-margin-bottom: 0.75 * $space;
$dt-font-weight: 500;
$line-height-base: $space-x6;
$font-weight-bolder: 500;
$font-weight-base: 400;

$inner-spaces: (
  0: 0,
  i-x1: 0.125 * $space,
  i-x2: 0.25 * $space,
  i-x3: 0.375 * $space,
  i-x4: 0.5 * $space,
  i-x5: 0.625 * $space,
  i-x6: 0.75 * $space,
  i-x7: 0.875 * $space,
);

$i-space-x1: map_get($inner-spaces, i-x1); //2
$i-space-x2: map_get($inner-spaces, i-x2); //4
$i-space-x3: map_get($inner-spaces, i-x3); //6
$i-space-x4: map_get($inner-spaces, i-x4); //8
$i-space-x5: map_get($inner-spaces, i-x5); //10
$i-space-x6: map_get($inner-spaces, i-x6); //12
$i-space-x7: map_get($inner-spaces, i-x7); //14

//breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 666px,
  md: 992px,
  lg: 1200px,
  xl: 1440px,
  xxl: 1800px,
) !default;

//containers
$container-max-widths: (
  sm: 618px,
  md: 960px,
  lg: 1080px,
  xl: 1200px,
  xxl: 1680px,
) !default;

//Typography
$font-family-base: 'Roboto', sans-serif;
$font-size-base: 1rem;
$h1-font-size: 1.75rem; //28
$h2-font-size: 1.5rem; //24
$h3-font-size: 1.25rem; //20
$h4-font-size: 1.125rem; //18
$h5-font-size: 1rem;

//other
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;

$input-btn-padding-x: 1.25rem;
$input-btn-padding-x-sm: $input-btn-padding-x;
$input-btn-padding-x-lg: $input-btn-padding-x;

$borderPrimary: 1px solid $lightSapphire;
$borderColorPrimary: $lightSapphire;

$card-spacer-x: $space;

//Shadows
$dropshadow-1: 0px 1px 3px rgba(0, 0, 0, 0.04), 0px 1px 4px rgba(0, 0, 0, 0.06);
$dropshadow-2: 0px 1px 3px rgba(0, 0, 0, 0.04), 0px 2px 8px rgba(0, 0, 0, 0.06);
$dropshadow-4: 0px 2px 3px rgba(0, 0, 0, 0.02), 0px 4px 12px rgba(0, 0, 0, 0.04);
$dropshadow-6: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 6px 16px rgba(0, 0, 0, 0.04);
$dropshadow-8: 0px 4px 6px rgba(0, 0, 0, 0.02), 0px 8px 18px rgba(0, 0, 0, 0.04);
$dropshadow-12: 0px 4px 8px rgba(0, 0, 0, 0.02), 0px 12px 20px rgba(0, 0, 0, 0.04);
$dropshadow-16: 0px 4px 16px rgba(0, 0, 0, 0.02), 0px 16px 25px rgba(0, 0, 0, 0.04);
$dropshadow-24: 0px 4px 16px rgba(0, 0, 0, 0.02), 0px 24px 32px rgba(0, 0, 0, 0.04);
$dropshadow-32: 0px 6px 18px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.04);
$dropShadow-56: 0px 8px 32px rgba(0, 0, 0, 0.02), 0px 56px 56px rgba(0, 0, 0, 0.06);

// Tables
$table-cell-padding: $space;
$table-caption-color: $black;
$label-margin-bottom: 0.25 * $space;

// Animation
$animation-duration: 300ms;

//displays
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
